<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;

  span {
    color: rgb(89, 89, 89);
  }
}

.main {
  dl {
    border-bottom: 1px solid #ccc;
    display: flex;
    padding: 10px;

    dd {
      width: 80vw;
      overflow: hidden;
    }

    .doctor {
      display: flex;
      align-items: center;

      p {
        padding: 10px;
      }

      span {
        font-size: 8px;
        background-color: rgb(1, 180, 136);
        color: #fff;
        padding: 2px;
        border-radius: 2px;
      }
    }
  }
}

dd {
  margin-left: 10px;
}

.tabs {
  white-space: nowrap;
  /* 阻止文本自动换行 */
  overflow-x: auto;
  /* 当内容超出容器宽度时，显示水平滚动条 */
  display: flex;
  /* 使用弹性布局 */
  align-items: center;
  /* 垂直居中对齐 */
  padding: 8px;
  /* 添加内边距，让内容与容器边缘有一定的距离 */
  text-align: center;
}

.tab {
  padding: 10px;
  margin-left: 10px;
  background-color: #ececec;
  border-radius: 50px;
}

.active {
  background-color: rgb(30, 112, 255);
  color: #fff;
}

.content {
  padding: 10px;
  border-top: 1px solid #ccc;
}

.classitem {
  font-size: 12px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  align-items: center;

  .divitem:last-child {
    border-right: none;
  }

  .divitem {
    width: 33%;
    display: flex;
    height: 20px;
    align-items: center;
    text-align: center;
    border-right: 1px solid #ccc;

    span {
      color: rgb(250, 100, 0);
      margin-left: 3px;

    }
  }
}

.money {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .moneyitem {
    display: flex;
    align-items: center;

    span {
      font-size: 12px;
      color: rgb(250, 100, 0);
    }

    p {
      font-size: 20px;
      color: rgb(250, 100, 0);
      padding: 3px;
    }

    span:last-child {
      color: rgb(89, 89, 89);
    }
  }
}

.mian-title {
  line-height: 35px;
  font-size: 12px;
  text-align: center;
  color: rgb(30, 112, 255);
}
</style>
<template>
  <div style="background-color: #fff;width: 96%;margin-left: 2%;border-radius: 10px;">
    <div class="header">
      <h3>我要问专家</h3>
      <span @click="router.push('/specialists')">更多></span>
    </div>
    <div class="main">
      <div class="tabs">
        <div v-for="(tab, index) in listTap" :key="index" class="tab" :class="{ active: currentIndex === index }"
          @click="tabClick(tab, index)">
          {{ tab }}
        </div>
      </div>
      <template v-if="ListData.length">
        <dl @click="doctorList(item)" v-for="(item, index) in ListData" :key="index">
          <dt>
            <img :src="item.doctorimage" alt=""
              style="width: 60px;height: 60px;border-radius: 50px;border: 1px solid #000;">
          </dt>
          <dd>
            <div class="doctor">
              <h3>{{ item.doctorname }}</h3>
              <p>主治医师</p>
              <span>{{ item.socolv }}</span>
            </div>
            <div class="van-ellipsis" style="line-height: 30px;">{{ item.doctorcity }}{{ item.doctorstate
              }}&ensp;{{
                item.doctoradministre }}
            </div>
            <div class="button">
              <van-button size="mini"
                style="background: rgb(231, 240, 255); color: rgb( 30, 112, 255);border: none;">图片资讯</van-button>
              <van-button style="background: rgb(228, 247, 242); color: rgb( 45, 185, 139);border: none;"
                size="mini">电话咨询</van-button>
            </div>
            <div class="main-con">
              <van-text-ellipsis rows="2" :content="text" style="font-size: 14px;">
                <template #action="{ expanded }">{{ expanded ? ' V' : '^' }} </template>
              </van-text-ellipsis>
            </div>
            <div class="classitem">
              <div class="divitem">
                <p>好评率</p>
                <span>{{ item.doctorgood }}%</span>
              </div>
              <div class="divitem">
                <p>锦旗</p>
                <span>{{ item.doctoradmin }}</span>
              </div>
              <div class="divitem">
                <p>浏览人数</p>
                <span>{{ item.doctorbrowse }}</span>
              </div>
            </div>
            <div class="money">
              <div class="moneyitem">
                <span>￥</span>
                <p>{{ item.doctorprice }}</p>
                <span>起</span>
              </div>
              <van-button style="background-color:rgb(30, 111, 255) ;color: #fff;" size="small">问医生</van-button>
            </div>
          </dd>
        </dl>
        <div class="mian-title" @click="router.push('/specialists')">查看此科室更多医生</div>
      </template>
      <template v-else>
        <van-skeleton :row="2">
          <template #template>
            <div :style="{ display: 'flex', width: '100%' }">
              <van-skeleton-image />
              <div :style="{ flex: 1, marginLeft: '16px' }">
                <van-skeleton-paragraph row-width="60%" />
                <van-skeleton-paragraph />
                <van-skeleton-paragraph />
                <van-skeleton-paragraph />
              </div>
            </div>
          </template>
        </van-skeleton>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { ListDatagete } from '@/Type/indeType';
import axios from 'axios';

import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const text = ref('擅长: 清晨的阳光洒在大地上，唤醒了沉睡的世界。鸟儿欢快地歌唱，树叶在微风中轻轻摇曳。夜晚的城市灯火辉煌，车水马龙。人们在忙碌了一天后，享受着属于自己的时光。海边的沙滩上，海浪拍打着海岸。孩子们在沙滩上嬉戏玩耍，笑声回荡在空气中。山间的小溪潺潺流淌，清澈见底。溪边的花朵绽放着，散发着迷人的香气')
const listTap = ref([
  '心血管内科',
  '普通内科',
  '老年病科',
  '感染科',
  '血液科',
  '肾内科',
  '呼吸内科',
  '风湿免疫科',
  '内分泌科',
  '消化内科',
  '神经内科',
  '职业病科',
  '过敏反应科',
  '普外科',
  '血管外科',
  '普外科',
  '肛肠科',
  '肝胆外科',
  '泌尿外科',
  '乳腺外科',
  '心血管外科',
  '神经外科',
  '烧伤外科',
  '麻醉科',
])

const pageCode = ref(1)
const pageSize = ref(2)
const ListData = ref<ListDatagete[]>([])
const tapslist = ref('')
const currentIndex = ref(0);

const tabClick = (tab: string, index: number) => {
  currentIndex.value = index
  tapslist.value = tab
  getData()
}
const getData = () => {
  console.log(111);
  axios.get('/api/doctor/list', { params: { pageCode: pageCode.value, pageSize: pageSize.value, admin: tapslist.value } }).then(res => {
    ListData.value = res.data.data
    console.log(res.data.data);
  })
}
getData()
const doctorList = (item: ListDatagete) => {
  axios.post('/api/doctor/browse', { id: item.doctorid })
  router.push('/doctordetail?id=' + item.doctorid)
}

</script>
